<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小萌神订餐网</title>
    <!-- 图标 -->
    <link rel="short icon" href="image/eat0.ico"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>

<div id="app">

    <div class="head">
        小萌神订餐网
        <div class="right">
            <span class="showlogin" id="showlogin" @click="loginflag=!loginflag" v-if="!isLogin">登录</span>

            <span id="exitspan" v-if="isLogin">
                欢迎您:{{username}}
                <a @click.prevent="historyflag=!historyflag">历史</a> |
                <a href="" @click.prevent="logout">退出</a>
            </span>
        </div>
    </div>

    <div class="content">
        <ul class="allfoods" id="allfoods">
            <li v-for="(item,index) in foods">
                <h3 @click="showFood(item.fid)">{{item.fname}}</h3>
                <div :id=`fid_${item.fid}` class="fooddesc" v-show="item.status">
                    <img :src=`image/${item.fphoto}` class="foodimg"/>
                    <article class="foodprice">
                        <p>菜品描述：{{item.detail}}</p>
                        <p class="normalprice">原价：￥{{item.normprice}}</p>
                        <p class="realprice">特价：￥{{item.realprice}}</p>
                        <p>赞{{item.praise}}<span  @click="clickPraise(item.fid,index)">&nbsp;&nbsp;点赞</span></p>
                        <p class="buybtn" @click="addCart(item.fid,1)">加入购物车</p>
                    </article>
                </div>
            </li>
        </ul>
        <div style="background-color: white;color: red" >
            <a  @click.prevent="clickPage(1)">第一页</a>
            <a  @click.prevent="clickPage(pagebean.pre)">上一页</a>
            <a  @click.prevent="clickPage(pagebean.next)">下一页</a>
            <a  @click.prevent="clickPage(pagebean.totalpages)">最后一页</a>
            总共{{pagebean.total}}条记录/共分{{pagebean.totalpages}}页,
            每页{{pagebean.pagesize}}条,当前第{{pagebean.pageno}}页
            按<select id="sortby" v-model="pagebean.sortby">
                <option value="fid" selected>菜品编号</option>
                <option value="realprice">成交价格</option>
            </select>
            <select id="sort" v-model="pagebean.sort">
                <option value="asc" selected>升序</option>
                <option value="desc">降序</option>
            </select>
        </div>
    </div>
    <div class="look" v-if="historyflag">
        <span @click="getHistory">浏览记录</span><hr />
        <ul>
            <li v-for="item in reversehistory">{{item.fid}}-{{item.fname}}</li>
        </ul>

    </div>
    <div class="shoppingcar">
        <div class="carbag" id="carbag" :class="{isShow:isHide==true,isHide:isHide==false}">
            <p>购物车<span id="del" @click="clearAll()">[清空]</span></p>
            <table id="bagcontent">
                <tr v-for="item in cartfoods">
                    <td>{{item.food.fname}}</td>
                    <td>
                        <button class="button" @click="addCart(item.food.fid,-1)">-</button>
                        {{item.num}}
                        <button class="button" @click="addCart(item.food.fid,1)">+</button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="carprice" @click="showCart()">￥{{cartprice}}</div>
        <div class="carinfo" v-if="cartfoods.length<=0">购物车是空的</div>
        <div class="carinfo" v-else @click="orderflag=!orderflag">立即下单</div>

    </div>
    <div class="footer">
        Copyright © 2016 Xiaomengsheng Incorporated Company. All rights reserved.
        <br/>
        订餐，就上小萌神订餐网!
    </div>

    <!--    登录信息-->resfood
    <div class="login" id="login" v-if="loginflag">
        <span id="unshow" @click="loginflag=false   ">X</span>
        <form name="myform">
            <table>
                <tr>
                    <td class="labname"><label for="username">用户名：</label></td>
                    <td><input type="text" name="username" placeholder="请输入用户名"
                               id="username" v-model="username"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="pwd">密码：</label></td>
                    <td><input type="password" name="pwd" placeholder="请输入密码"
                               id="pwd" v-model="pwd"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="yzm">验证码：</label></td>
                    <td><input type="text" name="yzm" placeholder="请输入验证码"
                               id="yzm" v-model="yzm"/></td>
                    <td><img src="code.action" id="yzm_img"/></td>
                </tr>
            </table>
        </form>
        <input type="button" value="login" class="btn" id="btn" @click="login"/>
    </div>


    <!-- 订单信息 -->
    <div class="login" id="myinfo" v-if="orderflag">
        <span id="unshowinfo" @click="orderflag=!orderflag">X</span>
        <form name="forminfo">
            <table>
                <tr>
                    <td class="labname"><label for="address" >送货地址:</label></td>
                    <td><input v-model="orderInfo.address" name="address" type="text" placeholder="请输入送货地址" id="address"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="tel" >联系电话:</label></td>
                    <td><input v-model="orderInfo.tel" type="text" id="tel" placeholder="请输入联系电话" name="tel"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="deliverytime" >送货时间:</label>
                    </td>
                    <td><input v-model="orderInfo.deliverytime" type="text" name="deliverytime" id="deliverytime"
                               placeholder="请输入送货时间（默认马上发货）"/></td>
                </tr>
                <tr>
                    <td class="labname"><label for="ps" >附言:</label></td>
                    <td><input v-model="orderInfo.ps" type="text" id="ps" placeholder="请输入附言" name="ps"/></td>
                </tr>
            </table>
        </form>
        <input type="button" value="提交" class="btn" id="submit" @click="confirmOrder()">
    </div>

</div>

<!--  在网页里面引入javascript    jquery:DOM   大家注意顺序  -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            orderflag: false,     //送货地址div
            loginflag: false,
            isLogin: false,  //当前登陆状态
            username: 'a',
            pwd: 'a',
            yzm: '',
            foods: [],    //显示菜单列表
            cartfoods: [],   //购物车列表
            cartprice: 0.0,  //总价格
            isHide: false, //默认隐藏
            history:[], //历史浏览记录
            historyflag:false,  //历史记录显示div
            //订单的model数据包装成一个对象

            orderInfo: {
                address: "衡阳",
                tel: '18973439882',
                deliverytime: '2024-06-16',
                ps: '无',
            },
            pagebean:{
                pageno:1,
                pagesize:5,
                sortby:"fid",
                sort:"asc",
                total:0,
                totalpages:0,
                pre:1,
                next:1,
            }
        },
        methods: {
            clickPraise(fid,index){
                var params=new URLSearchParams();
                params.append("fid",fid);
                axios.post("food.action?op=clickPraise",params).then(result=>{
                    var jsonModel=result.data;
                    if (jsonModel.code==1){
                        //这样操作不行
                        //this.data[index].praise=jsonModel.obj.praise; //新的点赞数
                        var d=this.foods[index];
                        // data这道菜的全部数据
                        d.praise=jsonModel.obj.praise;
                        //利用数组提供响应式的方法来实现数据的更新
                        //将data中下标为index位置元素 从这个元素开始向后替换1一个元素  用d替换
                        this.foods.splice(index,1,d);
                    }
                })
            },
            getHistory(){
              axios.post("food.action?op=getHistory").then(result=>{
                  var jsonModel=result.data;
                  if (jsonModel.code==1){
                      this.history=jsonModel.obj;
                  }
              })
            },
            clickPage(pageno){
              var promise=this.showPage(pageno);
              promise.then(result=>{
                  this.displayPage(result.data);
              })
            },
            showPage(pageno){
                var params=new URLSearchParams();
                params.append("pageno",pageno);
                params.append("sortby",this.pagebean.sortby);
                params.append("sort",this.pagebean.sort);
                return axios.post("food.action?op=findFoodsPage",params);
                // axios.post("food.action?op=findByPage",params).then(result=>{
                //     if (result.data.code == 1) {
                //         result.data.obj.dataset.forEach((item, index) => {
                //             item.status = false;
                //         });
                //         vm.$data.foods = result.data.obj.dataset;
                //         vm.$data.pagebean=result.data.obj;
                //     }
                // });
            },
            displayPage(result){
                let jsonModel=result;
                if (jsonModel.code==1){
                    jsonModel.obj.dataset.forEach((item, index) => {
                        item.status = false;
                    });
                    vm.$data.foods = jsonModel.obj.dataset;
                    vm.$data.pagebean = jsonModel.obj;
                }
            },
            confirmOrder() {
                var params = new URLSearchParams(this.orderInfo);
                axios.post("cust.action?op=confirmOrder", params).then(result => {
                    if (result.data.code==1){
                        alert("下单成功");
                        this.cartfoods=[];
                        this.cartprice=0.0;
                        this.isHide=false;
                        this.orderflag=false;
                    }
                })
            },
            clearAll() {
                axios.post("resorder.action?op=clearAll").then(result => {
                    if (result.data.code == 1) {
                        this.cartfoods = [];
                        this.cartprice = 0.0;
                        this.isHide = false;
                    }
                })
            },
            showCart() {
                this.isHide = !this.isHide;
            },
            addCart(fid, num) {
                var params = new URLSearchParams();
                params.append("num", num);
                params.append("fid", fid);
                axios.post("resorder.action?op=order", params).then(data => {
                    var jsonmodel = data.data;
                    if (jsonmodel.code == 0) {
                        alert(jsonmodel.error);
                        return;
                    } else {
                        this.showCartInfo(jsonmodel.obj);
                    }
                })
            },
            showCartInfo(cart) {
                this.cartfoods = cart;
                //计算总价
                this.cartprice = 0.0;
                this.cartfoods.forEach((item, index) => {
                    this.cartprice += item.smallCount;
                });
            },
            showFood(fid) {
                this.foods.forEach((item, index) => {
                    // if (fid==item.fid){
                    //     item.status=true;
                    // }else {
                    //     item.status=false;
                    // }
                    item.status = fid == item.fid;
                });
                axios.post("food.action?op=traceBroweFood&fid="+fid).then(result=>{
                    var jsonModel=result.data;
                    if (jsonModel.code==1){

                    }
                });
            },
            login() {
                var params = new URLSearchParams();
                params.append("username", this.username);
                params.append("pwd", this.pwd);
                params.append("yzm", this.yzm);
                axios.post("user.action?op=login", params).then(result => {
                    var code = result.data.code;
                    if (code == 1) {
                        this.username = result.data.obj.username;
                        this.loginflag = false;
                        this.isLogin = true;
                        alert("登录成功，欢迎您:" + this.username);
                    } else {
                        alert("登陆失败，请检查用户名或者密码是否正确");
                    }
                })
            },
            logout() {
                axios.post("user.action?op=logout").then(result => {
                    var code = result.data.code;
                    if (code == 1) {
                        this.username = '';
                        this.pwd = '';
                        this.yzm = '';
                        this.isLogin = false;
                    }
                })
            },
        },
        //计算属性
        computed:{
            reversehistory(){
                return this.history.reverse() //将数组倒序输出
            }
        },
        //页面渲染之后执行
             mounted() {
            axios.get("user.action?op=checkLogin").then(result => {
                let jsonmodel1 = result.data;
                if (jsonmodel1.code == 1) {
                    vm.$data.username = jsonmodel1.obj.username;
                    vm.$data.loginflag = false;
                    vm.$data.isLogin = true;
                }
            });
            this.getHistory();
            this.clickPage(this.pagebean.pageno);
            //var params=new URLSearchParams(this.pagebean);
            // this.showPage(1).then(result=>{
            //     let jsonmodel2 = result.data;
            //     if (jsonmodel2.code == 1) {
            //         jsonmodel2.obj.dataset.forEach((item, index) => {
            //             item.status = false;
            //         });
            //         vm.$data.foods = jsonmodel2.obj.dataset;
            //         vm.$data.pagebean=jsonmodel2.obj;
            //     }
            // });
            axios.get("resorder.action?op=getCartInfo").then(result=>{
                if (result.data.code == 1) {
                    this.showCartInfo(result.data.obj);
                }
            });


        },
    });
</script>

</body>
</html>